<template>
	<el-container>
		<div class="right-panel">
			<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">活动开始时间:</span>
					<el-date-picker
						v-model="search.activityStartDate"
						type="daterange"
						range-separator="-"
						start-placeholder="起始时间"
						end-placeholder="截止时间"
						:size="size"
						style="margin-left: 20px"
					/>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">活动截止时间:</span>
					<el-date-picker
						v-model="search.activityStopDate"
						type="daterange"
						range-separator="-"
						start-placeholder="起始时间"
						end-placeholder="截止时间"
						:size="size"
						style="margin-left: 20px"
					/>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">活动区域:</span>
					<el-select v-model="search.sex" placeholder="全部" style="width: 180px; margin-left: 20px" clearable>
						<el-option label="重庆" :value="0"></el-option>
						<el-option label="四川" :value="1"></el-option>
					</el-select>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">操作时间:</span>
					<el-date-picker
						v-model="value1"
						type="daterange"
						range-separator="-"
						start-placeholder="起始时间"
						end-placeholder="截止时间"
						:size="size"
						style="margin-left: 20px"
					/>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 20px">活动主题:</span>
					<el-input
						v-model="search.activityTheme"
						placeholder="请输入活动主题"
						style="margin-left: 20px; width: 180px"
						clearable
					></el-input>
				</div>
				<div class="panel-search-box">
					<el-button type="primary" style="margin-left: 50px" @click="upsearch">查询</el-button>
					<el-button type="" @click="upsearchClearable">清空</el-button>
				</div>
			</div>
		</div>
		<el-header>
			<div class="header-btn-item">
				<scFileImport :apiObj="importApi" :maxSize="30" @success="handleImportSuccess"></scFileImport>
				<scFileExport fileName="数据导出"></scFileExport>
				<el-button
					type="primary"
					icon="sc-icon-download-define"
					style="margin-left: 20px"
					@click="downTemp"
				></el-button>
				<el-button type="danger" icon="el-icon-delete" style="margin-left: 20px" @click="upsearch"></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				:params="params"
				stripe
				remoteSort
				remoteFilter
				@selection-change="selectionChange"
			>
				<el-table-column type="selection" width="50"></el-table-column>

				<el-table-column label="片区" prop="region" align="center" width="120"></el-table-column>
				<el-table-column label="省份" prop="province" align="center" width="120"></el-table-column>
				<el-table-column label="市区" prop="city" align="center" width="120"></el-table-column>
				<el-table-column label="活动名称" prop="name" align="center" width="120"></el-table-column>
				<el-table-column label="活动主题" prop="theme" align="center" width="120"></el-table-column>
				<el-table-column label="活动目标" prop="goal" align="center" width="120"></el-table-column>
				<el-table-column label="动销门店类型" prop="storeType" align="center" width="120"></el-table-column>
				<el-table-column label="活动当天门店客流" prop="footTraffic" align="center" width="120"></el-table-column>
				<el-table-column label="门店日常客流" prop="dailyTraffic" align="center" width="120"></el-table-column>
				<el-table-column
					label="活动当天门店平均客单"
					prop="avgCustomerSpending"
					align="center"
					width="180"
				></el-table-column>
				<el-table-column label="活动当天产出" prop="output" align="center" width="120"></el-table-column>
				<el-table-column label="活动当天产出同比" prop="outputYoyGrowth" align="center" width="120">
					<template #default="scope">
						{{ this.$TOOL.floatToPercentage(scope.row.outputYoyGrowth) }}
					</template>
				</el-table-column>
				<el-table-column label="投入" prop="investment" align="center" width="120"></el-table-column>
				<el-table-column label="投入产出比" prop="investmentOutputRatio" align="center" width="120">
					<template #default="scope">
						{{ this.$TOOL.floatToPercentage(scope.row.investmentOutputRatio) }}
					</template>
				</el-table-column>
				<el-table-column label="当月活动门店三九产出" prop="currentOutput" align="center" width="180"></el-table-column>
				<el-table-column
					label="同期活动门店三九产出"
					prop="samePeriodOutput"
					align="center"
					width="180"
				></el-table-column>
				<el-table-column
					label="下月活动门店三九产出"
					prop="nextMonthOutput"
					align="center"
					width="180"
				></el-table-column>
				<el-table-column
					label="当月活动门店整体产出"
					prop="currentTotalOutput"
					align="center"
					width="180"
				></el-table-column>
				<el-table-column
					label="同期活动门店整体产出"
					prop="samePeriodTotalOutput"
					align="center"
					width="180"
				></el-table-column>
				<el-table-column
					label="下月活动门店整体产出"
					prop="nextMonthTotalOutput"
					align="center"
					width="180"
				></el-table-column>
				<el-table-column label="当月活动门店毛利率" prop="currentMargin" align="center" width="180">
					<template #default="scope">
						{{ this.$TOOL.floatToPercentage(scope.row.currentMargin) }}
					</template>
				</el-table-column>
				<el-table-column label="同期活动门店毛利率" prop="samePeriodMargin" align="center" width="180">
					<template #default="scope">
						{{ this.$TOOL.floatToPercentage(scope.row.samePeriodMargin) }}
					</template>
				</el-table-column>
				<el-table-column label="下月活动门店毛利率" prop="nextMonthMargin" align="center" width="180">
					<template #default="scope">
						{{ this.$TOOL.floatToPercentage(scope.row.nextMonthMargin) }}
					</template>
				</el-table-column>
				<!-- <el-table-column label="操作" fixed="right" align="center" width="120">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_show(scope.row)">查看详情 </el-button>
						</el-button-group>
					</template>
				</el-table-column> -->
			</scTable>
		</el-main>
		<el-drawer v-model="tasksVisible" :size="450" title="任务中心" destroy-on-close>
			<tasks ref="tasks"></tasks>
		</el-drawer>
	</el-container>
</template>

<script>
import tasks from './../../../../layout/components/tasks.vue'
export default {
	name: 'emp',
	components: {
		tasks
	},
	data() {
		return {
			dialog: {
				info: false
			},
			tasksVisible: false,
			search: {},
			apiObj: this.$API.activity.Onsale.list,
			importApi: this.$API.activity.OfficialOne.uploadExcel,
			params: {}
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val)
		}
	},

	mounted() {},
	async created() {},
	methods: {
		//任务
		tasks() {
			this.tasksVisible = true
		},
		//编辑
		table_edit(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('edit').setData(row)
			})
		},
		//表格内开关
		async changeSwitch(val, row) {
			row.enable = row.enable === 1 ? 0 : 1
			row.$switch_status = true
			let data = {
				enable: val,
				staffNumber: row.staffNumber
			}
			var res = await this.$API.user.user.enable.post({data:data})
			if (res && res.code === 0) {
				setTimeout(() => {
					delete row.$switch_status
					row.enable = val
					// console.log(typeof val, row)
					this.$message.success('操作成功')
				}, 500)
			}
		},

		//查看
		table_show(row) {
			this.dialog.info = true
			this.$nextTick(() => {
				this.$refs.infoDialog.setData(row)
			})
		},

		upsearch() {
			this.$refs.table.upData(this.search)
		},
		cleanSearch() {
			this.search = {}
		},
		// 导入成功后
		handleImportSuccess(res, close) {
			// console.log(res.data)
			let flag = this.checkImportStatus(res.data)
			if (flag) {
				if (res.code === '0') {
					// this.$alert('', '导入成功', {
					// 	type: 'success',
					// 	showClose: false,
					// 	center: true
					// })
					// if (resImport.code === '0') {
					// 	this.$TOOL.data.remove('importExcel')
					// }
					this.importExcelTask(res, close)
				}
			} else {
				this.$confirm(`已存在该导入任务,确定重新导入吗？`, '提示', {
					type: 'warning'
				})
					.then(() => {
						const loading = this.$loading()
						this.removeImportTask(res.data)
						this.importExcelTask(res)
						loading.close()
						// this.$message.success("操作成功")
					})
					.catch(() => {})
			}
		},
		// 导入任务
		async importExcelTask(res, close) {
			let importExcel = []
			importExcel.push({
				id: res.data,
				taskName: '动销活动数据导入',
				state: '0',
				createDate: this.$TOOL.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
				type: 'export'
			})
			let tasks = []
			this.$nextTick(() => {
				tasks = this.$refs.tasks.getExecTasks()
			})
			if (tasks) {
				tasks.forEach((element) => {
					importExcel.push(element)
				})
			}
			this.$TOOL.data.set('importExcel', importExcel)
			this.$nextTick(() => {
				this.$refs.tasks.setExecTasks(importExcel)
			})
			let resImport = this.$API.activity.Onsale.importExcel.post({ data: { filePath: res.data } })
			this.$message.success('上传成功,已添加导入任务!')
			close()
			this.tasks()
			await resImport
				.then((importRes) => {
					if (importRes.code === '0') {
						// 任务执行成功后更新本地缓存
						// console.log('运行成功')
						this.removeImportTask(res.data)
						// 更新页面
						this.upsearch()
					} else {
						this.removeImportTask(res.data)
						// 更新任务中心
					}
				})
				.catch(() => {
					this.removeImportTask(res.data)
				})
		},
		// 清除对应任务
		removeImportTask(id) {
			// 任务执行成功后更新本地缓存
			let oldTasks = []
			this.$nextTick(() => {
				oldTasks = this.$refs.tasks.getExecTasks()
			})
			let newTasks = []
			if (oldTasks) {
				oldTasks.forEach((element) => {
					if (id !== element.id) {
						newTasks.push(element)
					}
				})
			}
			// console.log('清除后缓存' + JSON.stringify(newTasks))
			this.$TOOL.data.set('importExcel', newTasks)
			this.$nextTick(() => {
				this.$refs.tasks.setExecTasks(newTasks)
			})
			// 更新任务中心
			this.$nextTick(() => {
				this.$refs.tasks.refresh()
			})
		},
		// 检查该文件是否在导入任务列表中
		checkImportStatus(id) {
			let video = []
			this.$nextTick(() => {
				video = this.$refs.tasks.getExecTasks()
			})
			if (!video) {
				return true
			} else {
				let status = true
				video.forEach((item) => {
					if (id === item.id) {
						status = false
					}
				})
				return status
			}
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode === 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode === 'edit') {
				this.$refs.table.tableData
					.filter((item) => item.id === data.id)
					.forEach((item) => {
						Object.assign(item, data)
					})
			}
		}
	}
}
</script>

<style>
.header-btn-item {
	display: flex;
}
</style>
